<template>
	<view
		:id="templateId"
		v-if="loaded"
		:style="{ 'padding-top': applied && '180rpx' }"
		class="container"
	>
		<!-- 退款状态 begin -->
		<view
			v-if="applied"
			:style="themeStyles.btnFullColor"
			class="status-wrap"
		>
			<!-- 状态区域 begin -->
			<view class="status-content">
				<uni-icon
					:color="themeStyles.auxiliaryColor"
					name="checkmark-hollow"
					size="64rpx"
				>
				</uni-icon>
				<view class="df1 content">
					<view class="title">{{ refundsData.statusValue }}</view>
					<view v-if="refundsData.statusDesc" class="desc">{{
						refundsData.statusDesc
					}}</view>
				</view>
			</view>
			<!-- 状态区域 end -->
		</view>
		<!-- 退款状态 end -->

		<!-- 卖家地址信息 begin -->
		<view
			v-if="viewAddress(refundsData.status)"
			class="page-panel address-wrap"
		>
			<view class="address-content">
				<view class="clamp title-box">
					<text class="title"
						>退货地址：{{ refundsData.customerName }}</text
					>
					<text class="phone">{{ refundsData.phone }}</text>
				</view>
				<view class="address-detail">
					{{ refundsData.address }}
				</view>
			</view>
			<button
				class="btn"
				:style="themeStyles.btnAuxiliaryColor"
				@click.stop="copyAddress()"
			>
				复制
			</button><!--  -->
		</view>
		<!-- 卖家地址信息 begin -->

		<!-- 商品相关 begin -->
		<view class="page-panel goods-wrap">
			<uni-goods-col
				v-for="(item, index) in refundsData.refundGoodsList"
				:key="index"
				:goods="item"
				:goodsTypeText="item.skuName"
			>
				<view slot="metaLeft">
					<view class="goods-meta-left">退款数量</view>
				</view>
				<template slot="metaRight">
					<text v-if="applied" class="cut-num"
						>x{{ item.refundsNumber }}</text
					>
					<view
						v-else
						@tap.stop="stopBubble()"
						class="df df-r buy-number-input"
					>
						<view class="df df-r sub" @tap.stop="subBuyNum(index)"
							>-</view
						>
						<view class="df df-c input-box">
							<input
								class="tac input"
								type="number"
								v-model="item.refundsNumber"
								@blur="ranDomBuyNum(index)"
							/>
						</view>
						<view class="df df-r add" @tap.stop="addBuyNum(index)"
							>+</view
						>
					</view>
				</template>
			</uni-goods-col>
		</view>
		<!-- 商品相关 end -->

		<!-- 到货状态 begin -->
		<view
			@click="selectReceiveStatus()"
			v-if="refundsData.refundsType === 20"
			class="page-panel refunds-type"
		>
			<view class="df jc-sb cell-item">
				<text class="cell-name">是否到货</text>
				<text
					:class="refundsData.receiveValue ? '' : 'light-text'"
					class="cell-right "
					>{{ refundsData.receiveValue || "请选择" }}</text
				>
			</view>
		</view>
		<!-- 到货状态 end -->

		<!-- 退款金额 begin -->
		<view class="page-panel refunds-price">
			<view class="refunds-price__title">
				<text v-if="refundsData.status === 4"
					>退款金额：￥{{ refundsData.refund_money || 0 }}</text
				>
				<text v-else
					>退款金额： ￥{{ refundsData.applyMoney || 0 }}</text
				>
			</view>
			<text class="refunds-price__desc">
				<template v-if="refundsData.status === 4">
					退款金额将在1-3个工作日内返还至原支付账户
				</template>
				<template v-else>
					最多可退{{
						refundsData.applyMoney || 0
					}}元，具体以和商家协商为准，退款退还至原支付账户。
				</template>
			</text>
		</view>
		<!-- 退款金额 end -->

		<!-- 退款明细 begin -->
		<view class="page-panel refunds-detail">
			<view class="cell-list">
				<view class="df jc-sb cell-item">
					<text class="dib cell-name ">退款类型：</text>
					<text class="cell-right">{{
						refundsData.refundsType === 20 ? "仅退款" : "退货退款"
					}}</text>
				</view>
				<view class="df jc-sb cell-item">
					<text class="dib cell-name ">退款原因：</text>
					<text @click="selectReason()" class="cell-right">{{
						refundsData.reasonValue || "请选择"
					}}</text>
				</view>
				<view class="df jc-fs cell-item">
					<text class="dib cell-name ">退款说明：</text>
					<text
						@click="toggleexplainsInput()"
						class="df1 cell-content-default"
						>{{
							refundsData.explains ||
								(!applied ? "选填，不超过100字" : "无")
						}}</text
					>
				</view>
				<view class="cell-item">
					<text class="dib cell-name">上传凭证：</text>
					<view class="df jc-fs fw-w upload-wrap">
						<view
							v-for="(item, index) in tempFilePaths"
							:key="index"
							class="image-box"
						>
							<image
								@click="previewImage(tempFilePaths, index)"
								class="image"
								:src="item"
							>
							</image>
							<view
								v-if="!applied"
								class="cancel-icon"
								@click.stop="removeCutImage(index)"
							>
								<uni-icon
									size="40rpx"
									:color="themeStyles.lightMainColor"
									name="cancel"
								>
								</uni-icon>
							</view>
						</view>
						<view
							v-if="!applied && tempFilePaths.length < 5"
							@click="onChooseImage()"
							class="df df-c image-box upload-btn"
						>
							<uni-icon size="64rpx" name="camera"> </uni-icon>
							<text>上传凭证</text>
							<text>（最多5张）</text>
						</view>
					</view>
				</view>
				<view v-if="applied" class="df cell-item">
					<text class="dib cell-name main-text">申请时间：</text>
					<text class="main-text light-text">{{
						refundsData.insTime
					}}</text>
				</view>
				<view v-if="applied" class="df cell-item">
					<text class="dib cell-name main-text">退款编号：</text>
					<text class="main-text light-text">{{
						refundsData.refundsId
					}}</text>
				</view>
			</view>
			<!-- <button
				open-type="contact"
				:style="themeStyles.textMainColor"
				class="tac contant-merchant"
			>
				联系商家
			</button> -->
		</view>
		<!-- 退款明细 end -->
		<!-- 退款说明弹出层 begin -->
		<view v-if="isexplainsPop" class="pof df explains-pop">
			<view class="poa input-box">
				<view class="tar btn-group">
					<text
						@click="toggleexplainsInput()"
						:style="themeStyles.textMainColor"
						class="confirm"
						>确定</text
					>
				</view>
				<textarea
					v-model="refundsData.explains"
					@confirm="toggleexplainsInput()"
					cursor-spacing="120"
					:focus="true"
					:fixed="true"
					class="bd main-text light-text"
					placeholder-class="main-text"
					:maxlength="100"
					type="text"
					placeholder="选填，不超过100字"
				></textarea>
			</view>
		</view>
		<!-- 退款说明弹出层 end -->
		<!-- 底部 begin -->

		<view v-if="!applied" class="submit-btn-box">
			<button
				:style="themeStyles.btnFullColor"
				class="df df-c submit-btn"
				@click="applyRefunds()"
			>
				提交
			</button>
		</view>

		<view v-else class="pof footer">
			<view class="footer-box">
				<view class="df jc-fe btn-group">
					<button
						v-if="viewBtn(refundsData.status, 1)"
						@click="cancelApplication()"
						class="df df-r btn "
					>
						撤销申请
					</button>
					<button
						v-if="viewBtn(refundsData.status, 2)"
						@click="
							navTo(
								`/pages/user/pages/logistics/fill?refundsId=${refundsData.refundsId}`
							)
						"
						class="df df-r btn "
						:style="themeStyles.btnAuxiliaryColor"
					>
						填写物流
					</button>
					<!-- <button
          v-if="viewBtn(refundsData.status, 3)"
          @click="applyAgain(refundsData)"
          :style="themeStyles.btnAuxiliaryColor"
          class="df df-r btn full-btn"
        >再次申请</button> -->
					<button
						v-if="
							refundsData.refundsType === 10 &&
								viewBtn(refundsData.status, 4)
						"
						@click="
							navTo(
								`/pages/user/pages/logistics/logistics?singleNumber=${refundsData.logisticsNo}`
							)
						"
						:style="themeStyles.btnAuxiliaryColor"
						class="df df-r btn full-btn"
					>
						查看物流
					</button>
				</view>
			</view>
		</view>
		<!-- 底部 end -->
	</view>
</template>

<script>
/** api begin */
import {
	queryApplicationRefunds,
	addRefundsApplication
} from "@/lib/api/refundsServer/goods";

import {
	qeuryRefundsDetail,
	queryRefundsReasonList
} from "@/lib/api/refundsServer/info";
/** api end */

import refundsMixin from "@/mixins/afterSale/refunds";

/** components begin */
import uniGoodsCol from "@/components/goods/uniGoodsCol";
import uniCountdown from "@/components/uniCountdown/uniCountdown";
import uniIcon from "@/components/uniIcon/uniIcon";

/** components end */

import { upload } from "@/lib/api/fileServer/file";

import { mapState, mapMutations } from "vuex";
let reasonData = {}; // 退款理由
let reasonDataIndex = null; // 退款理由索引

const receivArr = ["已收到货", "未收到货"];

export default {
	mixins: [refundsMixin],
	components: {
		uniGoodsCol,
		uniCountdown,
		uniIcon
	},
	data() {
		return {
			isexplainsPop: false, // 退款说明弹出
			// refundsStatusTitle: "",
			remark: "",
			applied: null, // 是否已申请
			refundsData: {
				id: "",
				explains: "",
				reason: "",
				reasonValue: "",
				receive: "",
				receiveValue: "",
				type: "",
				refundGoodsList: []
			},

			tempFilePaths: [],
			refundsNum: ""
		};
	},

	computed: {
		...mapState("afterSale", ["applicationRefundsData"])
	},

	async onLoad(option) {
		// await this.getApplicationRefunds();
		this.applied = this.applicationRefundsData.applied;
		this.refundsData.refundsId =
			this.applicationRefundsData.refundsId || "";
		if (!this.applied) {
			await this.getApplicationRefunds();
		} else {
			await this.getRefundsDetail();
		}
		this.loaded = true;
	},

	onShow() {
		console.log("---退款信息---",this.applicationRefundsData);
	},

	methods: {
		...mapMutations("afterSale", [
			"saveApplicationRefundsData",
			"removeApplicationRefundsData"
		]),

		copyAddress() {
			const refundsData = this.refundsData;
			uni.setClipboardData({
				data: `退货地址：\n姓名：${refundsData.customerName}\n电话：${refundsData.phone}\n地址：${refundsData.address}`,
				success: () => {
					this.$api.showToast("复制成功");
				}
			});
		},

		async onChooseImage() {
			/**
			 * 最多上传数量
			 */
			const count = 5 - this.tempFilePaths.length;

			/**
			 *  文件大小
			 */
			const maxFileSize = 20480000;

			let prompt = false;
			try {
				const { tempFiles } = await this.chooseImage(
					5 - this.tempFilePaths.length
				);

				for (let i = 0; i < tempFiles.length; i++) {
					if (tempFiles[i].size > maxFileSize) {
						prompt = true;
						continue;
					}
					const compressedImage = await this.compressImage(
						tempFiles[i].path,
						50
					);
					this.tempFilePaths.push(compressedImage);
				}

				prompt &&
					this.$api.showToast(
						`您有文件过大（超过${maxFileSize /
							1024000}M），请重新上传`
					);
			} catch (error) {
				console.log("error", error);
			}
		},

		/**
		 * 压缩图片
		 */
		compressImage: function(src, quality = 80) {
			return new Promise((resolve, reject) => {
				uni.compressImage({
					src,
					quality,
					success: res => {
						console.log("compressedImage", res.tempFilePath);
						resolve(res.tempFilePath);
					},
					fail: error => {
						console.log("error", error);
						reject(error);
					}
				});
			});
		},

		/**
		 * 选择图片
		 */
		chooseImage: function(count = 9) {
			return new Promise((resolve, reject) => {
				uni.chooseImage({
					count,
					success: res => {
						console.log("res", res);
						resolve(res);
					},
					fail: error => {
						reject(error);
					}
				});
			});
		},

		// 上传图片
		async uploadImage(filePaths) {
			if (!filePaths.length) return [];

			const sendImagePaths = [];
			for (const filePath of filePaths) {
				const propsData = {
					filePath,
					showLoading: false,
					hideLoading: false
				};
				const res = await upload(propsData);

				sendImagePaths.push(res.data);
			}
			return sendImagePaths;
		},

		// 卖家地址展示
		viewAddress(status) {
			return (
				status === 200 ||
				status === 300 ||
				(this.refundsData.refundsType === 10 && status === 400) ||
				(this.refundsData.refundsType === 10 && status === 500)
			);
		},
		/**
		 * 退款状态详情提示
		 * @param { Number } descType // 类型 1: 撤销申请; 2: 填写物流; 3: 查看物流; 4: 商家同意退款; 5: 商家拒绝
		 * @param { status }
		 */
		// viewStatusDesc(descType) {
		//     let isView = false;
		//     const status = this.refundsData.status;
		//     const retudnsAndrefunds = this.refundsData.refundsType === 10;
		//     switch (descType) {
		//         case 1:
		//             if (status === 1) {
		//                 isView = true;
		//             }
		//             break;

		//         case 2:
		//             if (retudnsAndrefunds && status === 2) {
		//                 isView = true;
		//             }
		//             break;

		//         case 3:
		//             if (retudnsAndrefunds && status === 3) {
		//                 isView = true;
		//             }
		//             break;

		//         case 4:
		//             if (status === 6) {
		//                 isView = true;
		//             }
		//             break;

		//         case 5:
		//             if (status === 5) {
		//                 isView = true;
		//             }
		//             break;

		//         default:
		//             break;
		//     }
		//     return isView;
		// },

		// 根据退款状态改变提示
		// changeRefundsStatusTitle(status) {
		// 	let value = "";
		// 	const refunds = this.refundsData.refundsType === 20;
		// 	switch (status) {
		// 		case 1:
		// 			if (refunds) {
		// 				value = "退款申请待商家处理";
		// 			}
		// 			value = "退货退款申请待商家处理";
		// 			break;

		// 		case 2:
		// 			value = "退货退款申请商家已同意";
		// 			break;

		// 		case 3:
		// 			value = "等待商家确认收货并退款";
		// 			break;
		// 		case 4:
		// 			value = "退款成功";
		// 			break;
		// 		case 6:
		// 			value = "退款成功";
		// 			break;
		// 		case 5:
		// 			if (refunds) {
		// 				value = "退款申请商家已拒绝";
		// 			}
		// 			value = "退款申请商家已拒绝";
		// 			break;

		// 		default:
		// 			break;
		// 	}
		// 	this.refundsStatusTitle = value;
		// },

		/** 退款详情 begin */
		async getRefundsDetail() {
			const propsData = {
				refundsId: this.refundsData.refundsId
			};
			try {
				const { data } = await qeuryRefundsDetail(propsData);
				console.log("---退款详情---",data);
				this.refundsData = data;
				this.tempFilePaths =
					(data.imagePath && data.imagePath.split(",")) || [];
				console.log("this.tempFilePaths", this.tempFilePaths);
				this.applicationRefundsData.refundsType = this.refundsData.refundsType;
				// this.changeRefundsStatusTitle(this.refundsData.status);
				this.removeApplicationRefundsData();
			} catch (error) {
				console.log("error", error);
				await this.$api.showToast(error.resultInfo || "操作失败");
				uni.navigateBack();
			}
		},

		async cancelApplication() {
			try {
				await this.cancelRefunds(this.refundsData.refundsId);
				// 重置售后列表
				this.$api.prePage().resetData();
				uni.navigateBack();
			} catch (error) {
				console.log("error", error);
				this.$api.showToast(error.resultInfo || "操作失败");
			}
		},

		/** 退款详情 end */

		// 移除当前图片
		removeCutImage(index) {
			this.tempFilePaths.splice(index, 1);
		},

		/** 退款申请 begin */
		applyValidator() {
			const refundsData = this.refundsData;
			if (refundsData.refundsType === 20 && !refundsData.receiveValue) {
				this.$api.showToast("请选择是否到货");
				return false;
			}

			if (!refundsData.reasonValue) {
				this.$api.showToast("请选择退款原因");
				return false;
			}
			return true;
		},

		// 申请退款
		async applyRefunds() {
			if (!this.applyValidator() || this.applying) return;
			this.applying = true;
			uni.showLoading({ title: "提交中", mask: true });

			try {
				const sendImagePaths = await this.uploadImage(
					this.tempFilePaths
				);
				console.log("---uploadImage_result---",sendImagePaths);
				const propsData = {
					showLoading: false,
					orderId: this.applicationRefundsData.orderId,
					refundsGoods: this.applicationRefundsData.list,
					receive: this.refundsData.receive,
					refundsType: this.refundsData.refundsType,
					reason: this.refundsData.reason,
					explains: this.refundsData.explains,
					imagePath: sendImagePaths.join(",")
				};
				await addRefundsApplication(propsData);
				this.removeApplicationRefundsData();
				await this.$api.showToast("成功提交");
				uni.reLaunch({
					url: "/pages/user/pages/afterSale/afterSaleList"
				});
			} catch (error) {
				console.log("error", error);
				uni.hideLoading();
				this.$api.showToast(error.resultInfo || "提交失败");
			}
			this.applying = false;
		},

		// 选择到货状态
		selectReceiveStatus() {
			if (this.applied) {
				return;
			}
			uni.showActionSheet({
				itemList: receivArr,
				success: res => {
					console.log("res", res);
					this.refundsData.receive = res.tapIndex + 1 + "0";
					this.$set(
						this.refundsData,
						"receiveValue",
						receivArr[res.tapIndex]
					);
					console.log(
						"this.refundsData.receive",
						this.refundsData.receive
					);
				},
				fail: error => {
					console.log("error", error);
				}
			});
		},

		// 选择退款理由
		async selectReason() {
			if (this.applied) {
				return;
			}
			try {
				const res = await queryRefundsReasonList();
				reasonData = res.data;
				const reasonArr = [];
				for (const item of reasonData) {
					reasonArr.push(item.dictValue);
				}
				uni.showActionSheet({
					itemList: reasonArr,
					success: res => {
						console.log("res", res);
						this.refundsData.reason =
							reasonData[res.tapIndex].dictId;
						this.$set(
							this.refundsData,
							"reasonValue",
							reasonArr[res.tapIndex]
						);
					},
					fail: error => {
						console.log("error", error);
					}
				});
			} catch (error) {
				console.log("error", error);
			}
		},

		toggleexplainsInput() {
			if (this.applied) {
				return;
			}
			this.isexplainsPop = !this.isexplainsPop;
		},

		// 获取申请退款数据
		async getApplicationRefunds() {
			const propsData = {
				orderId: this.applicationRefundsData.orderId,
				refundsGoods: this.applicationRefundsData.list
			};

			try {
				const res = await queryApplicationRefunds(propsData);
				// this.refundsData = res.data;
				this.refundsData.applyMoney = res.data.applyMoney;
				this.refundsData.refundGoodsList = res.data.refundGoodsList;

				this.refundsData.refundsType = this.applicationRefundsData.refundsType;

				// 重新组装退款申请数据
				// const nowRefundsList = [];
				// this.refundsData.refundGoodsList.forEach((item, index) => {
				//   nowRefundsList.push({
				//     orderGoodsId: item.orderGoodsId,
				//     refundsNumber: item.refundsNumber
				//   });
				// });
			} catch (error) {
				console.log("queryApplicationRefundsError", error);
				this.$api.showToast(error.resultInfo || "出错了* _ *");
			}

			/** 退款申请 end */
		},

		/** 修改数量区域 begin */

		// 减少数量
		async subBuyNum(index) {
			const goods = this.refundsData.refundGoodsList[index];
			if (goods.refundsNumber <= 1) {
				goods.refundsNumber = 1;
				this.$api.showToast("不能再少了 * _ *");
				return;
			}
			try {
				goods.refundsNumber--;

				this.changeApplicationRefundsNum(goods);
				await this.getApplicationRefunds();
			} catch (error) {
				console.log("error", error);
				uni.showToast({
					title: error.resultInfo,
					icon: "none"
				});
			}
			// goods.refundsNumber--;
		},

		// 增加数量
		async addBuyNum(index) {
			const goods = this.refundsData.refundGoodsList[index];
			console.log("goods", goods);
			if (goods.refundsNumber >= goods.refundableNum) {
				goods.refundsNumber = goods.refundableNum;
				this.$api.showToast("已是最大退款数量");
				return;
			}
			try {
				goods.refundsNumber++;
				this.changeApplicationRefundsNum(goods);
				await this.getApplicationRefunds();
			} catch (error) {
				console.log("error", error);
				uni.showToast({
					title: error.resultInfo,
					icon: "none"
				});
			}
			// goods.refundsNumber++;
		},

		// 改变购买数量
		async ranDomBuyNum(index) {
			// setTimeout是为了防止input值不改变（详见uniapp）
			const goods = this.refundsData.refundGoodsList[index];
			try {
				// 最大购买数量
				if (goods.refundsNumber > goods.refundableNum) {
					setTimeout(() => {
						goods.refundsNumber = goods.refundableNum;
					}, 0);
				}

				// 最小购买数量
				if (goods.refundsNumber < 1) {
					setTimeout(() => {
						cart.refundsNumber = 1;
					}, 0);
				}
				this.changeApplicationRefundsNum(goods);
				await this.getApplicationRefunds();
			} catch (error) {
				console.log("error", error);
				uni.showToast({
					title: error.resultInfo,
					icon: "none"
				});
			}
		},

		// 更改申请退款数量
		changeApplicationRefundsNum(item) {
			const refundsList = this.applicationRefundsData.list;
			for (const goods of refundsList) {
				if (goods.orderGoodsId === item.orderGoodsId) {
					goods.refundsNumber = item.refundsNumber;
				}
			}
		}

		/** 修改数量区域 end */
	}
};
</script>

<style lang="scss">
.container {
	padding: 0 24rpx 140rpx;
}

.page-panel {
	border-radius: 16rpx;
	overflow: hidden;
	background-color: $theme-panel-bg-color;
}

// 商品列表类样式
@import "@/common/styles/goods/numInutBox.scss";
@import "@/common/styles/address/address.scss";

// 简易地址
@import "@/common/styles/address/simpleAddress";

.goods-wrap {
	margin-top: 24rpx;
	.goods-meta-left {
		color: $theme-color-main-base;
		font-size: $theme-size-small-base;
	}
}

.status-wrap {
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	height: 180rpx;
	.status-content {
		width: 100%;
		height: 100%;
		display: flex;
		align-items: center;
		flex-direction: row;
		padding: 0 40rpx;
		.content {
			margin-left: 16rpx;
			.title {
				font-size: $theme-size-large-base;
			}
			.desc {
				font-size: 26rpx;
				margin-top: 20rpx;
			}
		}
	}
}

.main-text {
	font-size: $theme-size-base;
}

.light-text {
	color: #a1a1a1;
}

.test {
	font-size: 99rpx;
}

.meta {
	font-size: 20rpx;
	color: #a1a1a1;
}

.refunds-price,
.refunds-type {
	margin-top: 24rpx;
	padding: 24rpx;
}

.refunds-price {
	&__title {
		color: $theme-color-main-base;
		font-size: $theme-size-base;
	}
	&__desc {
		margin-top: 16rpx;
		font-size: 20rpx;
		color: $theme-color-ghost-base;
	}
}

.refunds-detail {
	margin-top: 24rpx;
	padding: 28rpx 24rpx;
	.cell-item {
		margin-bottom: 40rpx;
	}
}

// .cell-list {
// }
.cell-item {
	// display: flex;
	// justify-content: space-between;
	// align-items: center;
	font-size: 26rpx;

	.cell-name {
		width: 140rpx;
		color: $theme-color-main-base;
	}

	.cell-content-default {
		color: $theme-color-ghost-base;
	}

	.cell-content {
		color: $theme-color-main-base;
	}

	.cell-right {
		color: $theme-color-base;
	}

	.upload-wrap {
		margin-top: 28rpx;
		.image-box {
			position: relative;
			margin: 0 28rpx 28rpx 0;
			width: 164rpx;
			height: 164rpx;
		}
		image.image {
			position: relative;
			width: 100%;
			height: 100%;
			border-radius: 6rpx;
			overflow: hidden;
		}
		.cancel-icon {
			z-index: 1;
			position: absolute;
			width: 40rpx;
			height: 40rpx;
			right: -20rpx;
			top: -20rpx;
			border-radius: 100%;
			overflow: hidden;
		}
		.upload-btn {
			border: 1.2rpx dashed #999999;
			font-size: 20rpx;
			color: #999999;
		}
	}
}

.explains-pop {
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	z-index: 998;
	background-color: rgba(0, 0, 0, 0.5);
	.input-box {
		left: 0;
		right: 0;
		bottom: 0;
		padding: 40rpx;
		background: #fff;
		.btn-group {
			margin-bottom: 20rpx;
		}
		textarea {
			width: 100%;
			height: 240rpx;
		}
	}
}

.contant-merchant {
	border-radius: 8rpx;
	font-size: $theme-size-large-base;
}

.submit-btn-box {
	position: fixed;
	left: 0;
	right: 0;
	background-color: $theme-main-bg-color;
	bottom: var(--safe-area-inset-bottom);
	display: flex;
	justify-content: center;
	padding-top: 10rpx;
	height: 100rpx;
	z-index: 95;
	// box-shadow: 0 -4rpx 8rpx rgba(204, 204, 204, 0.5);
	.submit-btn {
		font-size: $theme-size-large-base;
		width: 702rpx;
		height: 80rpx;
		border-radius: 200rpx;
	}
}

.footer {
	padding: 0 32rpx;
	position: fixed;
	left: 0;
	bottom: 0;
	z-index: 995;
	width: 100%;
	height: 100rpx;
	font-size: 30rpx;
	background-color: #fff;
	z-index: 998;
	box-shadow: 0 -2rpx 0 0 rgba(204, 204, 204, 0.5);
	display: flex;
	justify-content: flex-end;
	align-items: center;
	.btn-group {
		display: flex;
		justify-content: flex-end;
		align-items: center;
		flex-direction: row;
		.btn {
			font-size: $theme-size-base;
			background-color: #ffffff;
			border: 2rpx solid $theme-color-ghost-base;
			color: $theme-color-ghost-base;
			margin-left: 20rpx;
			border-radius: 40rpx;
			width: 184rpx;
			height: 80rpx;
		}

		.btn.full {
			font-weight: 500;
			border: none;
		}
	}
}
</style>
